<template>
  <div class="vt-view__container">
    <div class="vt-view__row-title">
      不同状态(type)使用
    </div>
    <div class="vt-view__row">
      <!-- FIXME Default type 需要修改-->
      <vt-button>Default</vt-button>
      <vt-button type="primary">Primary</vt-button>
      <vt-button type="success">Success</vt-button>
      <vt-button type="warning">Warning</vt-button>
      <vt-button type="danger">Danger</vt-button>
      <vt-button type="info">Info</vt-button>
    </div>

    <div class="vt-view__row-title">
      plain 使用
    </div>
    <div class="vt-view__row">
      <vt-button plain>123321</vt-button>
      <vt-button type="primary" plain>123321</vt-button>
      <vt-button type="success" plain>123321</vt-button>
      <vt-button type="warning" plain>123321</vt-button>
      <vt-button type="danger" plain>123321</vt-button>
      <vt-button type="info" plain>123321</vt-button>
    </div>

    <div class="vt-view__row-title">
      round
    </div>
    <div class="vt-view__row">
      <vt-button round>Default</vt-button>
      <vt-button type="primary" round>Primary</vt-button>
      <vt-button type="success" round>Success</vt-button>
      <vt-button type="warning" round>Warning</vt-button>
      <vt-button type="danger" round>Danger</vt-button>
      <vt-button type="info" round>Info</vt-button>
    </div>

    <div class="vt-view__row-title">
      circle
    </div>
    <div class="vt-view__row">
      <!-- FIXME 待修复 -->
      <vt-button icon="check" circle></vt-button>
      <vt-button type="primary" icon="check" circle></vt-button>
      <vt-button type="success" circle icon="check"></vt-button>
      <vt-button type="warning" circle icon="check"></vt-button>
      <vt-button type="danger" circle icon="check"></vt-button>
      <vt-button type="info" round circle icon="check">123</vt-button>
    </div>

    <div class="vt-view__row-title">
      禁用状态
    </div>
    <div class="vt-view__row">
      <vt-button round icon="check" disabled>Default</vt-button>
      <vt-button type="primary" disabled icon="check">primary</vt-button>
      <vt-button type="success" disabled icon="check">success</vt-button>
      <vt-button type="warning" disabled icon="check">warning</vt-button>
      <vt-button type="danger" disabled circle icon="check">danger</vt-button>
      <vt-button type="info" disabled round circle icon="check">info</vt-button>
    </div>
    <div class="vt-view__row">
      <vt-button round icon="check" disabled>Default</vt-button>
      <vt-button type="primary" disabled plain icon="check">primary</vt-button>
      <vt-button type="success" disabled plain icon="check">success</vt-button>
      <vt-button type="warning" disabled plain icon="check">warning</vt-button>
      <vt-button type="danger" disabled plain circle icon="check">danger</vt-button>
      <vt-button type="info" disabled round plain circle icon="check">info</vt-button>
    </div>

    <div class="vt-view__row-title">
      Loading
    </div>
    <div class="vt-view__row">
      <vt-button round icon="check">not loading</vt-button>
      <!-- loading 属性，默认加载图标 -->
      <vt-button type="primary" ref="btnRef" icon="check" @click="fnLoading1" :loading="loading1">loading1</vt-button>
      <!-- loading-icon 设置加载图标 -->
      <vt-button type="success" icon="check" loading loading-icon="truck-ramp-box">success</vt-button>
      <!-- loading 插槽 -->
      <vt-button type="success" icon="check" :loading="loading3" @click="fnloading3">
        <template #loading>
          <div class="custom-loading">
            <svg class="circular" viewBox="-10, -10, 50, 50">
              <path class="path" d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" />
            </svg>
          </div>
        </template>
        success</vt-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const btnRef = ref<null | Element>(null)

const loading1 = ref(false)

function fnLoading1() {
  loading1.value = true;
  console.log("click");

  setTimeout(() => {
    loading1.value = false;
  }, 1000)
}

const loading3 = ref(false)
function fnloading3() {
  loading3.value = true
  // setTimeout(() => {
  //   loading3.value = false;
  // }, 1000)
}

</script>

<style scoped>
.vt-button .custom-loading {
  font-size: 0;
}

.vt-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

.vt-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--vt-button-text-color);
  stroke-linecap: round;
}
</style>
